<template>
  <a-modal
    :title="title"
    width="600px"
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="customerForm" :model="form" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol">
        <a-form-model-item label="ID" v-show="false">
          <a-input v-model="form.id"/>
        </a-form-model-item>
        <a-form-model-item label="账号" prop="username">
          <a-input v-model="form.username" :disabled="!isAdd"/>
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
          <a-input v-model="form.password"/>
        </a-form-model-item>
        <a-form-model-item label="姓名">
          <a-input v-model="form.name"/>
        </a-form-model-item>
        <a-form-model-item label="电话号">
          <a-input v-model="form.phone"/>
        </a-form-model-item>
        <a-form-model-item label="身份证号">
          <a-input v-model="form.idCard"/>
        </a-form-model-item>
        <a-form-model-item label="股东账号">
          <a-input v-model="form.stockAccount"/>
        </a-form-model-item>
        <a-form-model-item label="状态" prop="status">
          <a-select v-model="form.status" placeholder="请设置状态" defaultValue="1">
            <a-select-option :value="1">待审核</a-select-option>
            <a-select-option :value="2">已审核</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  import { addCustomer, updateCustomer } from '@/api/customer'
  import { errorHandler, successHandler } from '@/utils/request'

  export default {
    name: 'CustomerModal',
    data () {
      return {
        isAdd: true,
        visible: false,
        title: '客户信息',
        confirmLoading: false,
        labelCol: { span: 6 },
        wrapperCol: { span: 17 },
        form: {},
        rules: {
          username: [
            { required: true, message: '请输入帐号', trigger: 'blur' },
            { min: 2, message: '帐号长度为2-12位', trigger: 'blur' },
            { max: 12, message: '帐号长度为2-12位', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码长度为6-16位', trigger: 'blur' },
            { max: 16, message: '密码长度为6-16位', trigger: 'blur' }
          ],
          status: [{ required: true, message: '请选择状态', trigger: 'change' }]
        }
      }
    },
    methods: {
      add () {
        this.title = '新增客户信息'
        this.isAdd = true
        this.visible = true
        this.form = {}
      },
      edit (record) {
        console.log(record)
        this.title = '修改客户信息'
        this.isAdd = false
        this.visible = true
        this.form = record
      },
      handleOk (e) {
        this.confirmLoading = true
        this.$refs.customerForm.validate(valid => {
          if (valid) {
            // todo 需要调用 edit接口 或 add接口
            console.log('是否是新建: ', this.isAdd ? '是' : '否')
            const params = this.form
            console.log('form', params)
            if (this.isAdd) {
              console.log('新增客户信息')
              addCustomer(params).then(res => {
                console.log(res)
                successHandler(res)
                this.visible = false
                this.confirmLoading = false
                this.$emit('updateTable')
              }).catch(err => {
                this.confirmLoading = false
                errorHandler(err)
              })
            } else {
              console.log('修改客户信息')
              updateCustomer(params).then(res => {
                console.log(res)
                successHandler(res)
                this.visible = false
                this.confirmLoading = false
                this.$emit('updateTable')
              }).catch(err => {
                this.confirmLoading = false
                errorHandler(err)
              })
            }
            setTimeout(() => {
              this.visible = false
              this.confirmLoading = false
              this.$emit('updateTable')
            }, 2000)
          } else {
            console.log('检查信息为不通过')
            this.confirmLoading = false
            return false
          }
        })
      },
      handleCancel (e) {
        console.log('Clicked cancel button')
        this.visible = false
      }
    }
  }
</script>

<style scoped>

</style>
